<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js练习2</title>
    <style>
       div{
            background: #fff;
            padding: 20px;
            margin: 20px auto;
            width: 82%;
            border-color: #e8f3ec;
            border-bottom: 9px solid #E7EFF1;
            box-shadow: 1px 0px 5px rgba(100, 100, 100, 0.3);
        }
        .fr{
            background-color: aqua;
            width: 600px;
            height: 300px;
        }


    </style>
</head>
<body>
<div id="first">
    1、函数传参 一个参数
    <p>
        <button id="yellow">背景变黄</button>
        <button id="red">背景变红</button>
        <button id="black">背景变黑</button>
        <button class="re">恢复原样</button>
    </p>
    <p>定义函数的参数为color，变量adiv的样式调用参数color，onclick事件把背景颜色的值传给参数color。</p>

</div>

<div class="second">
2、函数参数 两个参数
    <p>
        <button class="w">背景变窄</button>
        <button class="aqua">背景变蓝</button>
        <button class="h">背景变高</button>
        <button class="re">恢复原样</button>
    </p>
    <p>定义函数的参数为name和value，变量bdiv的样式的属性名用参数name代替。</p>
</div>

<div class="third">
    3、函数传参 参数加变量
    <p>
        <input class="inp" type="text" value="你拍我，我反手就是一巴掌">
        <button class="btn">改变文字</button>
        <button>添加tittle属性（鼠标经过）</button>
    </p>
    <p>又是一堆看不懂的文字</p>
</div>

<div id="four">
    4、修改样式 通过调取className
    <p>
        <button id="magic">变蓝 变高 变窄</button>
        <button class="re">恢复原样</button>
    </p>
</div>

<script>
  var first=document.getElementById("first");
  var yellow=document.getElementById("yellow");
  yellow.onclick=function () {
      first.style.backgroundColor="yellow";
  }
  var red=document.getElementById("red");
  red.onclick=function () {
      first.style.backgroundColor="red";
  }
  var black=document.getElementById("black");
  black.onclick=function () {
      first.style.backgroundColor="black";
  }
  var re=document.getElementsByClassName("re")[0];
  re.addEventListener("click",function () {
      alert("这个还没有设计出来哦qaq")
  })
  var re=document.getElementsByClassName("re")[1];
  re.addEventListener("click",function () {
      alert("这个还没有设计出来哦qaq")
  })
  var re=document.getElementsByClassName("re")[2];
  re.addEventListener("click",function () {
      alert("这个还没有设计出来哦qaq")
  })

<!--第二个-->
  var second=document.getElementsByClassName("second")[0];
 var w=document.getElementsByClassName("w")[0];
  w.onclick=function () {
      second.style.width="200px";
  }
  var aqua=document.getElementsByClassName("aqua")[0];
  aqua.onclick=function () {
      second.style.backgroundColor="aqua";
  }
  var h=document.getElementsByClassName("h")[0];
  h.onclick=function () {
      second.style.height="300px";
  }

window.onload=function () {
    var inp=document.getElementsByClassName("inp")[0];
    var btn=document.getElementsByClassName("btn")[0];
    btn.onclick=function(){
        inp.value="hehe";
    };
};

  var magic=document.getElementById("magic");
  magic.addEventListener("click",function (ev) {
      ev.target.className="fr";
  });
</script>
</body>
</html>